<!-- <div class="box">abc</div>
<div id="id">def</div>
<h3><span><input type="text"></span></h3>
<script>
    var elem1 = document.querySelector('.box');
    console.log(elem1);
    var elem2 = document.querySelector('#id');
    console.log(elem2);
    var elem3 = document.querySelector('h3 span input');
    console.log(elem3);
</script> -->

<!-- <div class="box">abc</div>
<div id="id">def</div>
<script>
    var elems = document.querySelectorAll('div');
    console.log(elems);
</script> -->

<!-- <button id="btn">点我一下</button>
<script>
    var btn = document.getElementById('btn');
    btn.onclick = function () {
        alert("hello world");
   }
</script> -->

<!-- <div>
    <span>hello world</span>
    <span>hello world</span>
</div>
<script>
    var div = document.querySelector('div');
    // 读取 div 内部内容
    console.log(div.innerText);
    // 修改 div 内部内容, 界面上就会同步修改
    div.innerText = 'hello js <span>hello js</span>';
</script> -->

<!-- <div>
    <span>hello world</span>
    <span>hello world</span>
</div>
<script>
    var div = document.querySelector('div');
    // 读取页面内容
    console.log(div.innerHTML);
    // 修改页面内容
    div.innerHTML = '<span>hello js</span>'
</script> -->

<!-- <img src="refresh.png" alt="这是回退键" title="回退">
<script>
    var img = document.querySelector('img');
    console.dir(img);
    console.log(img.src);
    console.log(img.title);
    console.log(img.alt);
</script> -->

<!-- <input type="button" value="播放">
<script>
    let btn = document.querySelector('input');
    btn.onclick = function () {
        if (btn.value === "播放") {
            btn.value = "暂停";
        }
        else {
            btn.value = "播放";
        }
    }
</script> -->

<!-- <input type="text" id="text" value="-10">
<input type="button" id="btn" value="+">
<script>
    let text = document.querySelector('#text');
    let btn = document.querySelector('#btn');
    btn.onclick = function () {
        let num = text.value;
        console.log(num);
        num++;
        text.value = num;
    }
</script> -->